import React from 'react'
import type { Meta } from '@storybook/react-webpack5'

import Zoom from '../source'
import '../source/styles.css'
import './base.css'

const meta: Meta<typeof Zoom> = {
  title: '<svg>',
  component: Zoom,
}

export default meta

export const AnimatingSquare = (props) => (
  <main aria-label="Story">
    <h1>An animating square SVG with its width & height set via style</h1>
    <div className="mw-600">
      <figure>
        <Zoom {...props}>
          <svg
            aria-label="SVG animating from a circle to a square and back again on repeat"
            role="img"
            style={{ width: '10rem', height: '10rem' }}
            viewBox="0 0 10 10"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect width="10" height="10">
              <animate
                attributeName="rx"
                values="0;5;0"
                dur="10s"
                repeatCount="indefinite"
              />
            </rect>
          </svg>
        </Zoom>
        <figcaption>
          <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate">
            Animation MDN source
          </a>
        </figcaption>
      </figure>
    </div>
  </main>
)

export const BirdOnBackground = () => (
  <main aria-label="Story">
    <h1>A bird SVG on a non-SVG background</h1>
    <div className="mw-600">
      <div
        style={{
          backgroundColor: '#ccebff',
          borderRadius: '0 30px 0 30px',
          padding: '1rem',
          width: '20rem',
          height: 'auto',
        }}
      >
        <Zoom>
          <svg
            aria-label="Outline of a bird"
            role="img"
            viewBox="203.337 154.583 197.077 399.551"
            xmlSpace="preserve"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M382.92 542.2c-9.764-18.504-9.496-18.288-14.537-11.773-2.346 3.033-4.813 5.515-5.482 5.515-1.146 0-2.381-5.274-3.749-15.993-.326-2.553-2.368-11.909-4.539-20.795-2.171-8.884-3.947-17.755-3.947-19.713 0-5.187-8.713-32.977-11.055-35.258-1.098-1.068-5.249-2.104-9.227-2.301-6.258-.309-7.674.195-10.506 3.745-1.8 2.257-5.454 5.011-8.12 6.12-6.331 2.636-34.301 27.32-35.628 31.443-.565 1.755-.208 7.019.794 11.697 2.196 10.26.744 15.06-5.986 19.785-4.401 3.091-6.587 2.529-3.192-.818 2.655-2.618 3.638-15.329 1.567-20.26-1.059-2.521-2.457-4.582-3.107-4.582-1.438 0-15.973 14.122-19.175 18.63-1.265 1.781-2.299 2.383-2.299 1.338 0-3.677 4.293-11.697 8.982-16.782 2.607-2.827 4.375-5.722 3.93-6.434-1.133-1.808-12.523-1.623-13.679.221-1.171 1.868-3.838 1.996-3.838.183 0-2.261 7.987-4.643 18.241-5.438 11.055-.858 14.614-3.177 34.988-22.78l11.044-10.628-.046-11.537c-.045-11.305-.16-11.645-5.653-16.704-10.138-9.337-8.35-8.974-35.732-7.271l-25.145 1.563-4.955 5.651-4.955 5.651.924-4.92c.903-4.806.797-4.92-4.587-4.92-5.253 0-13.199 5.064-19.003 12.111-1.663 2.018-1.875 2.018-1.914 0-.075-3.941 5.929-12.126 10.018-13.66 4.691-1.758 3.587-4.506-1.81-4.506-2.111 0-3.473-.583-3.027-1.295s17.413-.958 37.705-.545c30.851.627 36.888.406 36.862-1.354-.017-1.158-4.187-7.555-9.266-14.215-11.746-15.405-23.752-39.382-26.152-52.227-2.618-14.016-2.633-41.653-.027-49.956 6.496-20.695 12.631-38.346 14.702-42.295 4.322-8.24 3.126-13.504-4.76-20.954-8.465-7.997-10.757-7.984-29.315.167-15.287 6.714-18.843 7.754-18.843 5.507 0-1.773 4.448-6.357 16.537-17.042 6.143-5.429 6.492-6.187 6.492-14.078 0-4.587 1.009-10.264 2.242-12.615 2.798-5.335 24.339-22.823 28.114-22.823.72 0 4.721-1.607 8.89-3.572 13.678-6.446 18.768-7.454 33.749-6.681 22.029 1.136 38.123 9.608 49.848 26.24 6.537 9.276 18.056 35.586 18.546 42.366.237 3.292 3.162 11.434 6.497 18.095 15.755 31.461 20.018 50.267 20.074 88.559.046 31.502-1.649 40.68-13.039 70.58-4.748 12.462-6 17.826-6 25.7 0 9.021 3.813 45.038 5.354 50.562.348 1.248 1.043 7.721 1.545 14.381.501 6.66 1.259 13.884 1.685 16.051.425 2.166 1.35 12.708 2.055 23.428 1.91 27.91.58 29.59-9.02 11.4zm4.8-25.18c-.824-3.331-1.937-10.824-2.473-16.652s-2.283-22.177-3.883-36.331c-1.6-14.155-3.365-30.072-3.923-35.372-.879-8.355-2.854-12.956-14.855-34.596-12.692-22.887-21.591-42.298-23.288-50.796-.369-1.853-2.504-8.818-4.742-15.479-5.297-15.758-5.547-33.847-.648-46.929 6.752-18.03 14.971-30.776 29.343-45.511l7.478-7.666-2.163-8.986c-2.478-10.29-12.282-31.084-16.383-34.743-2.614-2.333-2.911-1.991-5.486 6.347-2.913 9.427-3.211 20.345-1.036 37.957.955 7.742.824 12.222-.445 15.199-1.011 2.37-9.133 9.942-18.514 17.261-19.104 14.904-36.065 31.987-40.75 41.041-4.958 9.584-8.874 21.833-11.224 35.113-2.631 14.869-.703 28.211 6.868 47.511 3.939 10.043 7.183 15.161 15.535 24.506l10.555 11.81v13.72c0 11.406.403 13.719 2.39 13.719 2.707 0 10.998-8.393 12.307-12.457 1.033-3.207 5.262-3.608 5.262-.498 0 1.486 2.08 2.333 6.506 2.65 5.812.415 6.862 1.109 9.868 6.521 3.452 6.214 8.831 24.556 10.547 35.967.532 3.531 2.26 11.869 3.841 18.53 1.582 6.661 3.342 15.687 3.91 20.059 1.134 8.706 2.834 9.986 5.525 4.162 3.406-7.373 6.353-4.643 17.969 16.652l2.478 4.542.466-10.598c.23-5.81-.24-13.31-1.06-16.64zm-70.46-259.57c8.086-9.312 13.233-25.08 14.345-43.947 1.056-17.908 2.918-26.446 7.003-32.102 1.749-2.422 2.911-4.67 2.582-4.994-.33-.325-6.795-1.042-14.369-1.595l-13.77-1.004-2.984 5.088c-3.554 6.057-4.399 6.893-12.378 12.229-6.64 4.44-15.773 8.079-17.07 6.799-.441-.435.335-2.959 1.725-5.61 3.479-6.634 2.114-9.112-4.939-8.971-10.112.203-17.733 3.329-21.481 8.813-1.905 2.787-3.034 5.751-2.51 6.587s2.002-.186 3.286-2.271c3.331-5.413 9.781-8.704 17.056-8.704 5.064 0 6.288.538 6.288 2.764 0 5.977-14.439 13.688-22.086 11.796-2.206-.546-3.524-.18-3.564.991-.035 1.022-.541 3.616-1.125 5.765-.903 3.322-.185 4.556 4.797 8.245 3.222 2.386 13.804 11.19 23.515 19.566 30.57 26.37 30.59 26.38 35.66 20.54z" />
          </svg>
        </Zoom>
      </div>
    </div>
  </main>
)

// https://github.com/rpearce/react-medium-image-zoom/issues/438
export const Excalidraw = () => (
  <main aria-label="Story">
    <h1>A series of shapes connected by arrows with descriptive text</h1>
    <div className="mw-600">
      <Zoom>
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 626.29296875 489.6796875"
          width="626.2929"
          height="489.6796"
        >
          <rect
            x="0"
            y="0"
            width="626.29296875"
            height="489.6796875"
            fill="#ffff"
          />
          <g
            strokeLinecap="round"
            transform="translate(20 20.55078125) rotate(0 56.818359375 46.0390625)"
          >
            <path
              d="M76.44 1.84 C85.17 3.54, 93.63 10.5, 99.59 16.35 C105.54 22.19, 110.29 29.57, 112.17 36.9 C114.06 44.24, 113.8 52.94, 110.9 60.34 C107.99 67.74, 102.04 76, 94.77 81.3 C87.49 86.6, 76.65 90.75, 67.24 92.15 C57.82 93.54, 47.35 92.35, 38.28 89.64 C29.2 86.93, 18.87 81.58, 12.77 75.86 C6.68 70.14, 3.38 62.93, 1.69 55.33 C0 47.72, -0.46 37.43, 2.61 30.23 C5.68 23.02, 12.85 17.08, 20.1 12.11 C27.36 7.14, 35.75 1.58, 46.16 0.4 C56.56 -0.79, 75.29 3.46, 82.55 4.99 C89.82 6.52, 90.11 8.8, 89.75 9.59 M35.64 2.79 C43.74 -0.96, 54.48 -2, 63.94 -0.74 C73.41 0.52, 84.69 5.74, 92.42 10.36 C100.16 14.97, 107.02 20.2, 110.34 26.97 C113.67 33.75, 113.56 43.07, 112.35 51 C111.13 58.94, 108.74 68.38, 103.05 74.59 C97.35 80.8, 86.83 85.62, 78.16 88.27 C69.49 90.92, 60.26 91.36, 51.04 90.48 C41.81 89.6, 30.55 87.38, 22.82 82.99 C15.09 78.6, 8.53 71.2, 4.68 64.11 C0.82 57.02, -1.35 48.06, -0.32 40.45 C0.7 32.83, 5.17 24.66, 10.82 18.44 C16.47 12.23, 29.67 5.29, 33.59 3.16 C37.51 1.03, 33.75 4.79, 34.36 5.67"
              stroke="#000000"
              strokeWidth="1"
              fill="none"
            />
          </g>
          <g
            strokeLinecap="round"
            transform="translate(392.59375 20) rotate(0 67.927734375 50.771484375)"
          >
            <path
              d="M73.65 -0.19 C83.82 -0.22, 95.32 4.01, 104.01 8.36 C112.7 12.7, 120.45 19.29, 125.8 25.89 C131.16 32.49, 135.56 40.37, 136.12 47.97 C136.69 55.57, 133.69 64.14, 129.19 71.5 C124.69 78.87, 117.51 87.27, 109.13 92.17 C100.75 97.07, 89.51 99.76, 78.91 100.92 C68.31 102.09, 55.39 101.58, 45.52 99.18 C35.66 96.78, 26.88 92.24, 19.74 86.53 C12.59 80.81, 5.68 72.47, 2.64 64.87 C-0.39 57.28, -0.58 48.52, 1.51 40.96 C3.61 33.39, 8.57 25.47, 15.22 19.48 C21.87 13.5, 31.33 8.4, 41.44 5.05 C51.54 1.69, 69.9 0.1, 75.86 -0.63 C81.82 -1.35, 77.44 -0.22, 77.21 0.69 M45.05 3.73 C54.51 0.92, 68.17 0.28, 78.84 1.45 C89.51 2.62, 100.52 6.49, 109.08 10.73 C117.64 14.96, 125.67 19.96, 130.21 26.86 C134.75 33.76, 136.83 43.91, 136.32 52.15 C135.81 60.4, 132.24 69.74, 127.14 76.32 C122.05 82.91, 114.62 87.6, 105.74 91.66 C96.85 95.73, 84.29 99.63, 73.85 100.69 C63.41 101.75, 52.54 100.93, 43.1 98.01 C33.66 95.09, 23.96 89.11, 17.22 83.17 C10.48 77.22, 5.02 70.2, 2.66 62.37 C0.3 54.54, 0.37 44.03, 3.06 36.18 C5.75 28.34, 11.66 21.06, 18.79 15.32 C25.92 9.58, 41.46 3.48, 45.84 1.75 C50.23 0.02, 44.77 3.93, 45.08 4.92"
              stroke="#000000"
              strokeWidth="1"
              fill="none"
            />
          </g>
          <g mask="url(#mask-ooJ4ibF08UocumcqOa1EM)" strokeLinecap="round">
            <g transform="translate(145.59428097835973 59.070939438578705) rotate(0 115.39682997613369 -0.4915348908477881)">
              <path
                d="M0.15 -0.24 C38.69 -0.34, 193.23 -0.72, 231.49 -0.81 M-1.23 -1.41 C37.2 -1.27, 192.03 0.48, 230.91 0.82"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(145.59428097835973 59.070939438578705) rotate(0 115.39682997613369 -0.4915348908477881)">
              <path
                d="M202.21 11.96 C211.96 5.78, 221.05 4.29, 230.39 -0.44 M202.16 11.32 C212.6 8.26, 221.12 3.41, 231.42 0.63"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(145.59428097835973 59.070939438578705) rotate(0 115.39682997613369 -0.4915348908477881)">
              <path
                d="M202.42 -8.56 C212.06 -8.19, 221.09 -3.13, 230.39 -0.44 M202.37 -9.2 C212.71 -5.25, 221.16 -3.08, 231.42 0.63"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
          </g>
          <mask id="mask-ooJ4ibF08UocumcqOa1EM">
            <rect
              x="0"
              y="0"
              fill="#fff"
              width="476.3879409306271"
              height="160.05400922027428"
            />
            <rect
              x="236.2111350633802"
              y="46.07940454773092"
              fill="#000"
              width="49.55995178222656"
              height="25"
              opacity="1"
            />
          </mask>
          <g transform="translate(236.2111350633802 46.07940454773092) rotate(0 24.512669051224293 12.696544553246326)">
            <text
              x="24.77997589111328"
              y="0"
              fontFamily="Virgil, Segoe UI Emoji"
              fontSize="20px"
              fill="#000000"
              textAnchor="middle"
              style={{ whiteSpace: 'pre' }}
              direction="ltr"
              dominantBaseline="text-before-edge"
            >
              Text
            </text>
          </g>
          <g mask="url(#mask-SzkdVd0dyrggj1A8lYRnx)" strokeLinecap="round">
            <g transform="translate(101.609375 126.671875) rotate(0 37.703125 82.224609375)">
              <path
                d="M1.16 1.1 C13.46 28.52, 62.75 137.7, 74.96 164.96 M0.32 0.63 C12.31 27.65, 61.03 135.53, 73.78 163.11"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(101.609375 126.671875) rotate(0 37.703125 82.224609375)">
              <path
                d="M54.58 140.97 C62.05 148.39, 69.93 157.55, 74.43 161.75 M51.86 142.36 C59.42 148.76, 65.4 156.07, 73.14 163.54"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(101.609375 126.671875) rotate(0 37.703125 82.224609375)">
              <path
                d="M73.25 132.45 C73.31 143.45, 73.76 156, 74.43 161.75 M70.53 133.84 C72.19 142.85, 72.24 152.87, 73.14 163.54"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
          </g>
          <mask id="mask-SzkdVd0dyrggj1A8lYRnx">
            <rect
              x="0"
              y="0"
              fill="#fff"
              width="277.015625"
              height="391.12109375"
            />
            <rect
              x="82.74254608154297"
              y="196.396484375"
              fill="#000"
              width="113.13990783691406"
              height="25"
              opacity="1"
            />
          </mask>
          <g transform="translate(82.74254608154297 196.396484375) rotate(0 56.50484466232359 13.071097182855027)">
            <text
              x="56.56995391845703"
              y="0"
              fontFamily="Virgil, Segoe UI Emoji"
              fontSize="20px"
              fill="#000000"
              textAnchor="middle"
              style={{ whiteSpace: 'pre' }}
              direction="ltr"
              dominantBaseline="text-before-edge"
            >
              Text Arrow
            </text>
          </g>
          <g
            strokeLinecap="round"
            transform="translate(174.39453125 244) rotate(0 94.26953125 68.515625)"
          >
            <path
              d="M118.75 17.25 M118.75 17.25 C136.41 30.62, 149.3 43.12, 164.79 51.75 M118.75 17.25 C134.22 27.86, 149.75 41.11, 164.79 51.75 M164.79 51.75 C186.66 67.31, 189.85 67.4, 164.79 86.25 M164.79 51.75 C187.4 70.11, 188.16 67.21, 164.79 86.25 M164.79 86.25 C147.25 100.24, 129.87 110.32, 118.75 119.78 M164.79 86.25 C150.71 95.77, 136.22 107.08, 118.75 119.78 M118.75 119.78 C96.45 135.91, 95.43 136.4, 71.25 119.78 M118.75 119.78 C95.24 136.6, 94.84 137.75, 71.25 119.78 M71.25 119.78 C56.5 110.18, 39.52 99.98, 23.75 86.25 M71.25 119.78 C61.78 112.63, 51.46 106.26, 23.75 86.25 M23.75 86.25 C-1.23 68.64, 1.79 69.34, 23.75 51.75 M23.75 86.25 C1.18 69.81, -2.01 68.03, 23.75 51.75 M23.75 51.75 C33.82 43.77, 48.63 33.66, 71.25 17.25 M23.75 51.75 C37.67 41.71, 52.89 30.07, 71.25 17.25 M71.25 17.25 C96 -0.01, 93.11 -1.17, 118.75 17.25 M71.25 17.25 C93.47 0.15, 96.36 -1.46, 118.75 17.25"
              stroke="#000000"
              strokeWidth="1"
              fill="none"
            />
          </g>
          <g mask="url(#mask-GrRrUWX5cd0_tTvab9KPU)" strokeLinecap="round">
            <g transform="translate(488.734375 135.21875) rotate(0 14.822265625 92.8828125)">
              <path
                d="M-0.96 -1.04 C4.08 29.88, 25.02 155.15, 30.2 186.25 M0.74 1.03 C5.67 31.52, 24.73 153.42, 29.54 184.37"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(488.734375 135.21875) rotate(0 14.822265625 92.8828125)">
              <path
                d="M13.32 159.02 C20.33 166.8, 23.47 174.35, 30.77 182.75 M15.65 158.92 C19.5 166.51, 24.96 174.51, 30.32 185.21"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(488.734375 135.21875) rotate(0 14.822265625 92.8828125)">
              <path
                d="M33.6 155.86 C34.59 164.42, 31.68 172.91, 30.77 182.75 M35.93 155.75 C33.27 164.25, 32.21 173.27, 30.32 185.21"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
          </g>
          <mask id="mask-GrRrUWX5cd0_tTvab9KPU">
            <rect
              x="0"
              y="0"
              fill="#fff"
              width="618.37890625"
              height="420.984375"
            />
            <rect
              x="406.3067092895508"
              y="215.6015625"
              fill="#000"
              width="194.49986267089844"
              height="25"
              opacity="1"
            />
          </mask>
          <g transform="translate(406.3067092895508 215.6015625) rotate(0 97.04689681343734 12.220587964728452)">
            <text
              x="97.24993133544922"
              y="0"
              fontFamily="Virgil, Segoe UI Emoji"
              fontSize="20px"
              fill="#000000"
              textAnchor="middle"
              style={{ whiteSpace: 'pre' }}
              direction="ltr"
              dominantBaseline="text-before-edge"
            >
              Random Text Arrow
            </text>
          </g>
          <g
            strokeLinecap="round"
            transform="translate(458.45703125 325.26171875) rotate(0 73.91796875 72.208984375)"
          >
            <path
              d="M32 0 M32 0 C59.59 -0.4, 88.53 0.12, 115.84 0 M32 0 C54.4 -1.14, 74.38 -0.62, 115.84 0 M115.84 0 C137.69 1.49, 145.9 11.96, 147.84 32 M115.84 0 C137.47 0.64, 146.34 10.98, 147.84 32 M147.84 32 C148.28 48.33, 145.78 65.81, 147.84 112.42 M147.84 32 C146.26 58.81, 147.92 86.35, 147.84 112.42 M147.84 112.42 C149.33 133.71, 138.22 145.63, 115.84 144.42 M147.84 112.42 C149.49 133.66, 138.02 144.09, 115.84 144.42 M115.84 144.42 C97.9 143.38, 76.73 142.11, 32 144.42 M115.84 144.42 C89 144.85, 62.01 145.17, 32 144.42 M32 144.42 C10.37 142.96, -0.67 135.22, 0 112.42 M32 144.42 C10.33 146.48, 1.7 132.31, 0 112.42 M0 112.42 C0.69 85.82, -2.2 56.5, 0 32 M0 112.42 C0.4 96.54, 0.21 79.98, 0 32 M0 32 C-1.83 9.28, 9.25 -1.34, 32 0 M0 32 C-2.19 8.75, 12.95 -0.69, 32 0"
              stroke="#000000"
              strokeWidth="1"
              fill="none"
            />
          </g>
          <g strokeLinecap="round">
            <g transform="translate(337.21484375 348.984375) rotate(0 52.912109375 13.373046875)">
              <path
                d="M0.12 0.48 C17.85 4.98, 88.64 21.82, 106.2 26.39 M-1.27 -0.31 C16.34 4.42, 87.81 23.33, 105.45 27.74"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(337.21484375 348.984375) rotate(0 52.912109375 13.373046875)">
              <path
                d="M76.39 31.24 C83.64 29.16, 94.76 29.29, 106.39 26.92 M76.04 29.84 C83.93 29.99, 92.75 29.2, 104.74 27.03"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
            <g transform="translate(337.21484375 348.984375) rotate(0 52.912109375 13.373046875)">
              <path
                d="M81.53 11.37 C87.19 15.05, 96.82 20.92, 106.39 26.92 M81.18 9.98 C87.65 15.55, 95.07 20.17, 104.74 27.03"
                stroke="#000000"
                strokeWidth="1"
                fill="none"
              />
            </g>
          </g>
          <mask />
        </svg>
      </Zoom>
    </div>
  </main>
)
